<template>
  <div class="image-list">
    <div class="scroll-wrapper">
      <ul class="image-items" ref="imageItems">
        <li v-for="item in images" :key="item.id" class="image-item">
          <one-image :image="item" @image-selected="showImageDetail(item)"></one-image>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import OneImage from './OneImage.vue';
import Image from './image';

// 创建一个图片对象
// const image1 = new Image(1, 'src/renderer/assets/test.png', 'My Image1', false);
// const image2 = new Image(2, 'src/renderer/assets/test.png', 'My Image2', false);
// const image3 = new Image(3, 'src/renderer/assets/test.png', 'My Image3', false);

export default {
  components: {
    OneImage
  },
  data() {
    return {
     
    };
  },
  
    props: ['images'],
  
  mounted() {
    this.initializeScrolling();
    console.log('woshidashabi'+this.images);
  },
  methods: {
    initializeScrolling() {
      // 根据实际情况初始化横向滚动效果
      // 可以使用第三方库，如swiper.js，或编写自定义的滚动逻辑
    },
    showImageDetail(image) {
      // 在这里处理显示图片详情的逻辑，可以设置相关数据和状态
      console.log('Image selected:', image);
      this.$emit('showImageDetail', image);
    }
  }
};
</script>

<style scoped>
.image-list {
  width: 100%;
  overflow-x: auto;
}

.scroll-wrapper {
  display: flex;
}

.image-items {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.image-item {
  margin-right: 10px;
}
</style>
